<!-- 封装修改信息的弹出框 -->
<!-- v-model绑定vuex中的store变量 -->
<template>
  <el-dialog v-model="store.state.homeview.dialogFormVisible" title="请输入修改内容">
    <el-form :model="form" :label-width="formLabelWidth">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="详细地址" >
        <el-input v-model="form.region" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <!-- 取消修改 传参为0-->
        <el-button @click="toggleDialog(0)">取消</el-button>
        <!-- 确认修改 传参为1-->
        <el-button type="primary" @click="toggleDialog(1)"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
// 使用vuex
import {useStore} from 'vuex'
const store=useStore()//获取store对象

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
// 关闭弹出框
const toggleDialog=(num:number)=>{
   // 调用vuex修改
   store.commit("SET_DIALOG")
   if(num==0){
    // 点击取消
   }else{
    // 点击确认
     //  获取输入框的值
    console.log(form.name+'---'+form.region);
   }
  
}
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
/* .el-input {
  width: 300px;
} */
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>